﻿@page "/modals"

<h3>Modal 模态框</h3>

<h4>在保留当前页面状态的情况下，告知用户并承载相关操作</h4>

<DemoBlock Title="基本用法" Introduction="弹出一个对话框，适合需要定制性更大的场景" Name="Normal">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">弹窗标题</h5>
            <button type="button" class="btn-close" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <p>弹窗正文</p>
        </div>
        <div class="modal-footer">
            <Button Color="Color.Secondary" Text="Close" Icon="fa fa-times"></Button>
            <Button Text="Save" Icon="fa fa-save"></Button>
        </div>
    </div>
    <div class="mt-3">
        <p>通过设置 <code>Modal</code> 组件的 <code>IsKeyboard</code> 参数，开启弹窗是否支持 <kbd>ESC</kbd>，请点击后面按钮设置后再点击 <b>弹窗</b> 按钮测试效果</p>
        <Button OnClick="async e => await Modal.Toggle()">弹窗</Button>
        <Button OnClick="OnClickKeyboard" Text="@($"Keyboard: {IsKeyboard}")" class="ms-3" />
    </div>
    <Modal @ref="Modal" IsKeyboard="@IsKeyboard">
        <ModalDialog Title="默认弹窗">
            <BodyTemplate>
                <div>我是弹窗内正文</div>
            </BodyTemplate>
        </ModalDialog>
    </Modal>
</DemoBlock>

<DemoBlock Title="IsBackdrop 背景关闭模式" Introduction="点击弹窗以外区域默认关闭弹窗效果" Name="IsBackdrop">
    <Button OnClick="@(async e => await BackdropModal.Toggle())">弹窗</Button>
    <Modal @ref="BackdropModal" IsBackdrop="true">
        <ModalDialog Title="点击背景可关闭弹窗">
            <BodyTemplate>
                <div>我是弹窗内正文</div>
            </BodyTemplate>
        </ModalDialog>
    </Modal>
</DemoBlock>

<DemoBlock Title="弹框大小" Introduction="通过 <code>Size</code> 设置弹框组件的大小" Name="DialogSize">
    <div class="row g-3">
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="@(async e => await SmailModal.Toggle())">小弹窗</Button>
            <Modal @ref="SmailModal">
                <ModalDialog Size="Size.Small" Title="小弹窗">
                    <BodyTemplate>
                        <div>我是弹窗内正文</div>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="@(async e => await LargeModal.Toggle())">大弹窗</Button>
            <Modal @ref="LargeModal">
                <ModalDialog Size="Size.Large" Title="大弹窗">
                    <BodyTemplate>
                        <div>我是弹窗内正文</div>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="@(async e => await ExtraLargeModal.Toggle())">超大弹窗</Button>
            <Modal @ref="ExtraLargeModal">
                <ModalDialog Size="Size.ExtraLarge" Title="超大弹窗">
                    <BodyTemplate>
                        <div>我是弹窗内正文</div>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="@(async e => await ExtraExtraLargeModal.Toggle())">超超大弹窗</Button>
            <Modal @ref="ExtraExtraLargeModal">
                <ModalDialog Size="Size.ExtraExtraLarge" Title="超超大弹窗">
                    <BodyTemplate>
                        <div>我是弹窗内正文</div>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="全屏弹窗" Introduction="设置属性 <code>FullScreenSize</code> 即可" Name="FullScreenSize">
    <div class="row g-3">
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="@(async e => await SmailFullScreenModal.Toggle())">全屏弹窗</Button>
            <Modal @ref="SmailFullScreenModal">
                <ModalDialog FullScreenSize="FullScreenSize.Always" Title="全屏弹窗">
                    <BodyTemplate>
                        <div>我是弹窗内正文</div>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="@(async e => await LargeFullScreenModal.Toggle())">全屏弹窗(&lt;992px)</Button>
            <Modal @ref="LargeFullScreenModal">
                <ModalDialog FullScreenSize="FullScreenSize.Large" Title="大全屏弹窗">
                    <BodyTemplate>
                        <div>我是弹窗内正文</div>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="@(async e => await ExtraLargeFullScreenModal.Toggle())">全屏弹窗(&lt;1200px)</Button>
            <Modal @ref="ExtraLargeFullScreenModal">
                <ModalDialog FullScreenSize="FullScreenSize.ExtraLarge" Title="超大全屏弹窗">
                    <BodyTemplate>
                        <div>我是弹窗内正文</div>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="@(async e => await ExtraExtraLargeFullScreenModal.Toggle())">全屏弹窗(&lt;1400px)</Button>
            <Modal @ref="ExtraExtraLargeFullScreenModal">
                <ModalDialog FullScreenSize="FullScreenSize.ExtraExtraLarge" Title="超超大全屏弹窗">
                    <BodyTemplate>
                        <div>我是弹窗内正文</div>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="垂直居中" Introduction="通过 <code>IsCentered</code> 设置弹框组件的垂直居中" Name="CenterVertically">
    <Button OnClick="@(async e => await CenterModal.Toggle())">垂直居中的弹窗</Button>
    <Modal @ref="CenterModal">
        <ModalDialog IsCentered="true" Title="垂直居中的弹窗">
            <BodyTemplate>
                <div>我是弹窗内正文</div>
            </BodyTemplate>
        </ModalDialog>
    </Modal>
</DemoBlock>

<DemoBlock Title="超长内容" Introduction="通过 <code>IsScrolling</code> 针对超出内容设置弹框组件滚轮滑动功能" Name="LongContent">
    <div class="row g-3">
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="@(async e => await LongContentModal.Toggle())">内容超长的弹窗</Button>
            <Modal @ref="LongContentModal">
                <ModalDialog IsCentered="true" Title="内容超长的弹窗">
                    <BodyTemplate>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
        <div class="col-12 col-sm-4 col-lg-auto">
            <Button OnClick="@(async e => await ScrollModal.Toggle())">内置滚动条弹窗</Button>
            <Modal @ref="ScrollModal">
                <ModalDialog IsCentered="true" IsScrolling="true" Title="内置滚动条弹窗">
                    <BodyTemplate>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    </BodyTemplate>
                </ModalDialog>
            </Modal>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="可拖拽弹窗" Introduction="点击弹窗标题栏对弹窗进行拖拽" Name="Drag">
    <Button OnClick="@(async e => await DragModal.Toggle())">弹窗</Button>
    <Modal @ref="DragModal">
        <ModalDialog Title="默认弹窗" IsDraggable="true">
            <BodyTemplate>
                <div>我是弹窗内正文</div>
            </BodyTemplate>
        </ModalDialog>
    </Modal>
</DemoBlock>

<DemoBlock Title="最大化按钮" Introduction="通过设置 <code>ShowMaximinzeButton</code> 弹窗显示最大化按钮" Name="Maximize">
    <Button OnClick="@(async e => await MaximizeModal.Toggle())">弹窗</Button>
    <Modal @ref="MaximizeModal">
        <ModalDialog Title="可最大化弹窗" ShowMaximizeButton="true">
            <BodyTemplate>
                <div>我是弹窗内正文</div>
            </BodyTemplate>
        </ModalDialog>
    </Modal>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />
